<template>
  <div class="enter-match-add">
    <div class="brand">
      参赛报名 > {{typeName}} > <span class="active">报名表</span>
    </div>
    <div class="enter-match-form">
      <el-row>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-col :span="8" :offset="2">
            <el-form-item label="姓名*" prop="nickname">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="学校/单位*" prop="schoolname">
              <el-input v-model="form.schoolname"></el-input>
            </el-form-item>
            <el-form-item label="e-mail*" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="证件类型*" prop="paperstype">
              <el-select placeholder="请选择证件类型" v-model="form.paperstype">
                <el-option label="身份证" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="性别*" prop="gender">
              <el-select placeholder="请选择性别" v-model="form.gender">
                <el-option label="男" value="1"></el-option>
                 <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职务" prop="jobname">
              <el-input v-model="form.jobname"></el-input>
            </el-form-item>
          <!--  <el-form-item label="手机号码*" prop="mobile">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item> -->
			<el-form-item label="邮政编码" prop="postcode">
			  <el-input v-model="form.postcode"></el-input>
			</el-form-item>
            <el-form-item label="证件号码*" prop="papers">
              <el-input v-model="form.papers"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" :offset="2">
            <el-form-item label="通讯地址" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
          
            <el-form-item label="免冠彩色2寸照*" label-width="150px">
              <upload
                class="upload-demo"
                :action="upload_url"
                :data="uploadData"
                :on-remove="handleRemove"
                :on-success="handlSuccess"
                :on-error="handlError"
                :limit="1"
                accept="image/*"
                list-type="picture">
                <el-button size="small" type="primary">上传图片</el-button>
              </upload>
            </el-form-item>
            <el-form-item label="其他证件:">
              <upload
                class="upload-demo"
                :action="upload_url"
                :limit="1"
                accept="image/*"
                :data="uploadData"
                :on-remove="handleOtherRemove"
                :on-error="handlError"
                :on-success="handlOtherSuccess"
                list-type="picture">
                <el-button size="small" type="primary">上传图片</el-button>
              </upload>
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="20">
              <divider></divider>
          </el-col>
          
          <el-col :span="24" class="book">
            <el-checkbox v-model="form.isRead"></el-checkbox> <span>已阅读并同意</span><Link type="primary">《注册规则》、</Link><Link type="primary" @click="visible=true">《疫情承诺书》</Link>
            <div>
                <el-button class="subt" @click="goAdd">提交</el-button>
                <el-button class="subt" @click="$router.back(-1)">取消</el-button>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <Dialog title="提示" :visible.sync="visible" width="1040px" :append-to-body="true" custom-class="epidemic-dialog" :show-close="false" center>
			<span slot="title">
				疫情承诺书
				<Divider></Divider>
			</span>
			<div class="epidemic-content">{{yiqingchengnuo.content}}</div>
			<div slot="footer"><el-button plain @click="visible=false" class="epidemic-btn">确定</el-button></div>
		</Dialog>
  </div>
</template>
<script>
import {Divider, Upload, Link, Dialog} from 'element-ui'
import { mapGetters } from 'vuex'
import { userApply } from '@/api'
import { UPLOAD_URL } from '@/api/common'
import { yiqingchengnuo } from '../../api/cms.js';

export default {
  components: {
    Divider, Upload, Link, Dialog
  },
  data() {
    return {
      upload_url: UPLOAD_URL,
      yiqingchengnuo: {},
			visible: false,
      rules: {
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        schoolname: [
          {
            required: true,
            message: "请输入学校/单位",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入e-mail",
            trigger: "blur",
          },
        ],
        paperstype: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "blur",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        // mobile: [
        //   {
        //     required: true,
        //     message: "请输入手机号",
        //     trigger: "blur",
        //   },
        // ],
        papers: [
          {
            required: true,
            message: "请输入证件号码",
            trigger: "blur",
          },
        ],
      },
      form: {
        aisletype: this.$route.params.type,
        nickname: '',
        schoolname: '',
        email: '',
        paperstype: '',
        gender: '',
        mobile: '',
        jobname: '',
        papers: '',
        address: '',
        postcode: '',
        photographimage: '',
        otherpapersimage: '',
        isRead: false
      },
      fileList: []
    };
  },
	created() {
		yiqingchengnuo()
			.then(res => {
				this.yiqingchengnuo = res.data.data.yiqingchengnuo;
				console.log();
			})
			.catch(res => {
				console.log(res);
			});
	},
  methods: {
      handleRemove() {
        this.form.photographimage = ''
      },
      handlSuccess(file) {
        this.form.photographimage = file.data.url
      },
      handleOtherRemove() {
        this.form.otherpapersimage = ''
      },
      handlOtherSuccess(file) {
        this.form.otherpapersimage = file.data.url
      },
      goAdd () {
        if (!this.userInfo) {
          return this.$message('请先登陆后，再进行报名')
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.photographimage == '') {
              return this.$message('还未上传免冠2寸照片')
            }
            if (!this.form.isRead) {
              return this.$message('还未阅读并同意 注册协议 和 疫情承诺书')
            }
            userApply(this.form)
              .then((res) => {
                console.log(res);
                if (res.code === 1) {
                  this.$message({ message: res.msg, type: "success" });
                } else {
                  this.$message(res.data.msg);
                }
              })
              .catch((res) => {
                console.log(res);
                this.$message("请稍后再试");
              });
          }
        });
      },
      handlError (err) {
        let res = JSON.parse(err.message)
        this.$message({
          type: 'error',
          message: res.msg
        })
      }
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    }),
    typeName () {
      //  1企业 2嘉宾 3团体 4个人
      const type = ['', '企业通道', '嘉宾通道', '团体通道', '个人通道']
      return type[this.$route.params.type]
    },
    uploadData () {
      return this.userInfo ?  {token: this.userInfo.token} : {}
    }
  }
};
</script>
<style scoped>
.enter-match-add {
  width: 1140px;
  margin: 0 auto;
}
.brand {
  color: #aba9a0;
  font-size: 14px;
  height: 66px;
  line-height: 66px;
  margin-top: 6px;
  padding-left: 48px;
}
.brand .active {
  color: #0143a0;
}
.enter-match-form {
  padding-top: 75px;
  padding-bottom: 50px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
  width: 1138px;
}
.book {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}
.book span {
    vertical-align: middle;
}
.subt {
  background-color: #0143a0;
  color: #fff;
  font-size: 24px;
  margin-top: 34px;
}
.subt:first-child {
  margin-right: 20px;
}
</style>
<style>
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';
}
</style>
<style>
.epidemic-dialog {
	border-radius: 8px;
}
.epidemic-dialog .el-dialog__header {
	text-align: left;
}
.epidemic-dialog .el-divider--horizontal {
	margin: 10px 0;
}
.epidemic-btn {
	color: #01478f;
	border-color: #01478f;
}
.epidemic-btn.el-button.is-plain:focus,
.epidemic-btn.el-button.is-plain:hover {
	color: #01478f;
	border-color: #01478f;
}
.epidemic-content {
	height: 237px;
	overflow-y: auto;
}
</style>